<script setup>
    // 1.导入
    import {useTodoStore} from '@/store/todo.js'
    import {ref} from "vue"
    // 2.创建
    const todo = useTodoStore()

    // 删除任务
    const del = (i) => {
        // 询问
        if(window.confirm("确认删除吗？")) {
            // 调用仓库方法进行删除
            todo.del(i)
        }
    } 
</script>
<template>
    <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" v-model="todo.isAll"/>
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
            <!-- 将pinia仓库中的数据以列表渲染的方式进行展现 -->
            <li v-for="item, index in todo.show()" :key="item.id"
            :class="{completed: item.finished}">
                <div class="view">
                    <input class="toggle" type="checkbox" v-model="item.finished"/>
                    <label>{{ item.text }}</label>
                    <button class="destroy" @click="del(index)"></button>
                </div>
            </li>
        </ul>
    </section>
</template>
